<!--
 * @Description: 
 * @Author: zwx
 * @Date: 2024-11-05 11:02:46
 * @LastEditors: zwx
 * @LastEditTime: 2024-11-05 11:24:35
 * @又活了一天: 你真厉害！！！
-->
<!DOCTYPE html>
<!-- 文档类型声明，指定这是一个HTML5文档 -->
<html lang="en">
<!-- html元素，根元素，lang属性指定文档的语言为英文 -->
<head>
    <meta charset="UTF-8">
    <!-- meta元素，指定文档的字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta元素，设置viewport属性，确保页面在移动设备上正确显示 -->
    <title>课程表</title>
    <!-- title元素，定义了浏览器工具栏的标题 -->
    <style>
        /* CSS样式定义表格的外观 */
        table {
            width: 45%;
            /* 表格宽度设置为页面宽度的45% */
            border-collapse: collapse;
            /* 边框折叠，避免单元格之间出现双线 */
            margin-top: 20px;
            /* 表格上边距 */
            table-layout: fixed;
            /* 表格布局固定，单元格宽度相等 */
            border: 1px solid #cccccc;
            /* 表格边框样式 */
        }
        th {
            background-color: #f2f2f2;
            /* 表头背景颜色 */
        }
        td {
            text-align: center;
            /* 单元格文本居中 */
            height: 40px;
            /* 单元格高度 */
            padding: 5px;
            /* 单元格内边距 */
            width: auto;
            /* 单元格宽度自适应 */
            border-radius: 10px;
            /* 单元格边框圆角 */
        }
        tr {
            height: 40px;
            /* 行高 */
            border-bottom: 1px dashed #ccc;
            /* 行底边框样式 */
        }
        /* 为不同的课程定义不同的背景颜色 */
        .English{
            background-color: #e86c7f;
        }
        .PE{
            background-color: #82b8f1;
        }
        .signal{
            background-color: #f2de7d;
        }
        .situation{
            background-color: #a8f7d4;
        }
        .computer{
            background-color: #f7a8f7;
        }
        .electric{
            background-color: #f7f7a8;
        }
        .shixi{
            background-color: #a8f7f7;
        }
        .politic{
            background-color: #f7a8a8;
        }
        .ele{
            background-color: #a8a8f7;
        }
        .signal2{
            background-color: #d699d7;
        }
        .xuanxiu{
            background-color: #def3c7;
        }
    </style>
</head>
<body>
    <table align="center">
        <tr>
            <th></th>
            <!-- 空表头，用于显示时间段 -->
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <!-- 定义一周中每天的课程列标题 -->
        </tr>
        <!-- 以下是具体的课程时间表 -->
        <tr>
            <td>1<br>8:30</td>
            <!-- 第一时间段，显示时间 -->
            <td class="English" rowspan="2">大学英语（IV）10203</td>
            <!-- 英语课，跨越两个时间段 -->
            <td></td>
            <!-- 空单元格 -->
            <td class="PE" rowspan="2">大学体育（IV）</td>
            <!-- 体育课，跨越两个时间段 -->
        </tr>
        <tr>
            <td>2<br>9:30</td>
           
        </tr>
        <tr>
            <td>3<br>10:30</td>
            <td></td>
            <td class="signal" rowspan="2">信号与系统（IV）@11302</td>
            <td class="situation" rowspan="2">形势与政策（IV）@15208</td>
            <td></td>
            <td class="computer" rowspan="2">数据结构与算法分析（IV）</td>

        </tr>
        <tr>
            <td>4<br>11:30</td>
            
        </tr>
        <tr>
            <td>5<br>12:30</td>
            <td></td>
            <td class="electric" rowspan="2">模拟电子技术基础@16204</td>
            <td></td>
            <td class="shixi" rowspan="2">电装实习@11301</td>
        </tr>
        <tr>
            <td>6<br>14:30</td>
            
        </tr>
        <tr>
            <td>7<br>15:30</td>
            <td class="politic" rowspan="2">毛概@14208</td>
            <td></td>
            <td class="ele" rowspan="2">电路、信号与系统实验</td>
            <td></td>
        </tr>
        <tr>
            <td>8<br>16:30</td>
            
        </tr>
        <tr>
            <td>9<br>17:30</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="signal2" rowspan="2">信号与系统（IV）</td>
        </tr>
        <tr>
            <td>10<br>18:30</td>
            <td></td>
            <td></td>
            <td></td>
            <td class="PE" rowspan="2">大学体育（IV）</td>
        </tr>
        <tr>
            <td>11<br>19:30</td>
        </tr>
        <tr>
            <td>12<br>20:30</td>
            <td class="xuanxiu">选修</td>
        </tr>
    </table>
</body>
</html>
